import React from "react";
import Comp1 from "./components/comp1";
import Comp2 from "./components/comp2";
class App extends React.Component {
  state = {
    count: 10,
  };
  handleAdd() {
    const { count } = this.state;
    this.setState({
      count: count + 1,
    });
  }
  // 生命周期：
  // 挂载
  constructor(props) {
    super(props);
    console.group("挂在阶段生命周期");
    console.log("constructor 生命周期执行了！！");
    // 1. 初始化 state, 注意： 只有这里可以直接修改 state， 其它地方修改state 必须使用setState
    // this.state = {
    //   count: 10,
    // };
    // 2. 绑定 this 指向
  }
  render() {
    const { count } = this.state;
    console.log("render 生命周期执行了！！");
    return (
      <div>
        <h1>{count}</h1>
        <button onClick={() => this.handleAdd()}>+1</button>
        <Comp1></Comp1>
        <Comp2></Comp2>
      </div>
    );
  }
  componentDidMount() {
    console.log("componentDidMount 生命周期执行了！！");
    console.groupEnd();
    // 1. 可以副作用操作， 例如：dom操作， 定时器， 发请求
  }

  // 更新
  shouldComponentUpdate(nextProps, nextState) {
    console.group("更新阶段生命周期");
    console.log("shouldComponentUpdate 生命周期执行了！！");
    // 返回布尔值
    // 用于优化
    // 返回true 正常更新
    // 返回 false  页面不会更新， 并且后续生命周期函数不执行
    if (nextState.count > 15) return false;
    return true;
  }
  // render
  componentDidUpdate() {
    console.log("componentDidUpdate 生命周期执行了！！");
    console.groupEnd();
  }

  // 销毁
  componentWillUnmount() {
    console.log("componentWillUnmount 生命周期执行了！！");
  }

  // 错误
  componentDidCatch() {}
}

export default App;
